<template>
  <layout-body>
    <div class="mt40 mb40">
      <template v-if="tabDetail.type == 1">
        <basicTypeDefault
          ref="systemBasicRef"
          :detail="tabDetail"
          :list="tabLists"
        ></basicTypeDefault>
      </template>
      <template v-else>
        <basicTypeList
          ref="systemBasicRef"
          :detail="tabDetail"
          :list="tabLists"
        ></basicTypeList>
      </template>
    </div>
  </layout-body>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getBasicConfig } from "@/api/system/basic";
import basicTypeDefault from "@/components/basic/type-default.vue";
import basicTypeList from "@/components/basic/type-list.vue";
import type { Result, ResultError } from "@/types";

const router = useRouter();

const { proxy } = getCurrentInstance() as any;

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const tabLoading = ref<boolean>(true);

const systemBasicRef = ref<HTMLElement>();

const tabField = ref<string>("");

const tabDetail: any = ref({});

const tabLists: any = ref([]);

const toInit = () => {
  getBasicConfig({ field: tabField.value })
    .then((res: Result) => {
      tabDetail.value = res.data.detail;
      tabLists.value = res.data.list;
      tabLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  let params = router.currentRoute.value.params;
  if (params && params.type) {
    tabField.value = String(params.type);
  }
  toInit();
});
watch(
  () => router.currentRoute.value.params,
  (val) => {
    if (val && val.type) {
      tabField.value = String(val.type);
      toInit();
    }
  },
  { deep: true }
);
</script>

<style scoped>
.tab-sub-box {
  padding: 0 120px;
}
</style>